<template>
  <div class="employees-container">
    <div class="app-container">

      <!-- 头部header 组件 -->
      <page-tools>
        <template #left>
          <span>总记录数: {{ employeeResult?.total }} 条</span>
        </template>
        <template #right>
          <!-- <el-button type="warning">excel导入</el-button>
          <el-button type="danger">excel导出</el-button> -->
          <el-button type="primary" @click="handleAddEmployee">新增员工</el-button>
        </template>
      </page-tools>

      <!-- 表格 模块 -->
      <el-card style="margin-top: 10px">
        <el-table border :data="employeeResult?.rows">
          <el-table-column label="序号" type="index" :index="indexMethod" width="80"/>
          <el-table-column label="姓名" prop="username"/>
          <el-table-column label="手机号" prop="mobile"/>
          <el-table-column label="工号" prop="workNumber"/>
          <el-table-column label="聘用形式" prop="formOfEmployment"> 
            <template #default="{row}">
              {{ formatFormOfEmployee(row.formOfEmployment) }}
            </template>
            </el-table-column >
          <el-table-column label="部门" prop="departmentName"/>
          <el-table-column label="入职时间" prop="timeOfEntry">
            <template #default="{row}">
              {{ formatTime(row.timeOfEntry) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="280">
            <template #default="{row}">
              <!-- <el-button type="primary">查看</el-button> -->
              <el-button type="success">分配角色</el-button>
              <el-button type="danger" @click="handleDeleteEmployee(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页组件 pagination -->
        <div style="height: 60px;  display: flex; justify-content: center">
          <el-pagination 
            v-model:current-page="params.page" 
            v-model:page-size="params.size" 
            layout=" prev, pager, next" 
            :total="employeeResult?.total||0" 
            @current-change="handleCurrentChange" />
        </div>
      </el-card> 

      <!-- dialog 弹框组件 -->
      <add-employee ref="addEmployeeRef" @updateEmployees="updateEmployees" ></add-employee>

    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref, onMounted} from 'vue'
import type {PageParams, EmployeeResult} from '@/types/employee'
import {getEmployeeListApi, deleteEmployeeApi} from '@/api/employee'
import dayjs from "dayjs"; 
// @ts-ignore
import AddEmployee from './components/add-employee.vue'
// @ts-ignore
import {ElMessage, ElMessageBox} from 'element-plus'

// 定义请求参数
const params = ref<PageParams>({
  page: 1,
  size: 10
})
// 定义员工列表返回的数据
const employeeResult = ref<EmployeeResult>()

// 获取员工列表数据
const getEmployeeList = async() => {
  // 获取员工列表数据
  const res = await getEmployeeListApi(params.value)
  employeeResult.value = res.data
}

 //处理聘用形式
 const formatFormOfEmployee = (type: 1 | 2): string => {
  const Map = {
    1: "正式",
    2: "非正式",
  }
  return Map[type]
}

//处理日期
const formatTime = (time: string) => {
  return dayjs(time).format("YYYY-MM-DD");
}

//展示序号
const indexMethod = (index: number) => {
  return (params.value.page - 1) * params.value.size + index + 1
}

// 页码变化
const handleCurrentChange = (val: number) => {
  params.value.page = val
  getEmployeeList()
}

// 新增员工弹框组件实例
const addEmployeeRef = ref<InstanceType<typeof AddEmployee> | null>(null)

// 新增员工
const handleAddEmployee = () => {
  // 打开弹层
  addEmployeeRef.value?.showDialogFn()
}

// 新增员工 更新员工列表
const updateEmployees = () => {
  // 更新到最后一页
  params.value.page = employeeResult.value?.total ? Math.ceil(employeeResult.value?.total / params.value.size) : 1
  // 刷新列表
  getEmployeeList()
}

// 删除员工
const handleDeleteEmployee = async(id: string) => {
  // 提示用户是否删除
  await ElMessageBox.confirm('是否删除该员工', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
  await deleteEmployeeApi(id)
  // 提示删除成功
  ElMessage.success('删除成功')
  // 重新拉取数据
  getEmployeeList()
}

onMounted(() => {
  getEmployeeList()
})

</script>

<style scoped></style>